<template>
  <div class="comment-reply">
    <!-- 导航栏 -->
    <van-nav-bar :title="`${comment.reply_count}条回复`"> 
      <van-icon
        slot="left"
        name="cross"
        @click="$emit('click-close')"
      />
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 当前评论项 -->
    <!-- 当前评论 -->
<van-cell title="当前评论">
  <van-image
    slot="icon"
    round
    width="30"
    height="30"
    style="margin-right: 10px;"
    :src="comment.aut_photo"
  />
  <span style="color: #466b9d;" slot="title">{{ comment.aut_name }}</span>
  <div slot="label">
    
    <p style="color: #363636;">{{ comment.content }}</p>
    <p>
      
      <span style="margin-right: 10px;"
        >{{ comment.pubdate | relativeTime }}</span
      >
      <van-button size="mini" type="default" 
        >回复 {{ comment.reply_count }}</van-button
      >
    </p>
  </div>
  <van-icon slot="right-icon" />
</van-cell>
<!-- /当前评论 -->
    <!-- /当前评论项 -->

    <van-cell title="所有回复" />

   <van-cell v-for="(item,index) in list" :key="index" :title="item.content">
        <van-image
          slot="icon"
          round
          class="avater"
          :src="item.aut_photo"
        />
        <div slot="title">
        <div class="title-wrap">
         <span style="color: #466b9d;">{{item.aut_name}}</span>
         <div class="like-wrap">
             <van-icon :name="item.is_liking?'good-job':'good-job-o'" @click="onCommentLike(item)" />
           <span>{{item.like_count>0?item.like_count:''}}</span>
           </div>
           
        </div>
            <div class="content" style="color: #363636;">{{item.content}}</div>
          <div class="reply">
           <span style="margin-right: 10px;">{{item.pubdate|datetime}}</span>
           <van-button size="mini" round 
           @click="$emit('click-reply',item)"
           >{{item.reply_count}}回复</van-button>
          </div>
         
           
</div>
      </van-cell>
    <!-- /评论的回复列表 -->

  

      <!-- 底部区域 -->
    <div class="article-bottom">
      <van-button
        class="comment-btn"
        type="default"
        round
        size="small"
         @click="isPostShow = true"
      >写评论</van-button>
    
    
    </div>
    <!-- /底部区域 -->
    

      <!-- 发布回复的回复 -->
<van-popup
  v-model="isPostShow"
  position="bottom"
>

  <post-comment  
   :target="comment.com_id.toString()"
   :article-id="articleId"
   @post-success="OnPostSucess"
  />
</van-popup>
<!-- /发布回复的回复 -->
  </div>
</template>

<script>
import PostComment from './comment-post.vue'
import {getComments } from '@/api/comment.js'
export default {
  name: 'CommentReply',
  components: {PostComment},
  props: {  
      comment: {
        type: Object,
       required: true
  },
  articleId: {
         type: [Number, String,Object],
         required: true
        }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      offset: null, // 请求下一页数据的页码
      totalCount: 0, // 总数据条数
      isPostShow:false
    }
  },
  computed: {},
  watch: {},
  created () {
    this.onLoad();
  },
  mounted () {
    
  },
  methods: {
    async  onLoad() {
        // 异步更新数据
         const articleCommentM = this.articleCommentM
      // 1. 请求获取数据
     const { data } = await getComments({
     type: 'c', // 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
     source: this.comment.com_id.toString(), // 源id，文章id或评论id
     offset: this.offset, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
     limit: 10 // 每页大小
  })

  // 2. 将数据添加到列表中
      const { results } = data.data
      
      this.list.push(...results)

      // 更新总数据条数
      this.totalCount = data.data.total_count
      //this.$emit('update-total-count', data.data.total_count)
      // 3. 将加载更多的 loading 设置为 false
      this.loading = false

      // 4. 判断是否还有数据
      if (results.length) {
        this.offset = data.data.last_id // 更新获取下一页数据的页码
      } else {
        this.finished = true // 没有数据了，关闭加载更多
      }
          },

  OnPostSucess(comment){
         //把最新的评论列表放置在前面
    this.comment.reply_count++
    this.list.unshift(comment)
    this.isPostShow=false;
      
    }
  }
}
</script>

<style scoped lang="less">
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
  .avater{
      width:30px;
      height:30px;
    margin-right: 10px;

  }

  .van-list {
    margin-bottom: 45px;
  }
  .title-wrap{
      display: flex;
      justify-content: space-between;
  }
  .reply{
      display: flex;
      align-items: center;
    //   justify-content: center;
  }
  .like-wrap{
      display: flex;
      align-items: center;
      justify-content: center;
  }

    .article-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    height: 44px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    .comment-btn {
      width: 141px;
      height: 23px;
      border: 1px solid #eeeeee;
      font-size: 15px;
      line-height: 23px;
      color: #a7a7a7;
    }
    .van-icon {
      font-size: 20px;
      .van-info {
        font-size: 11px;
        background-color: #e22829;
      }
    }
  }

</style>